<!doctype html>
<html ng-app="chinaums.study">
<head>
    <title>人像比对</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="webjars/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css"/>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular.min.js"></script>
    <script type="text/javascript" src="upload-pic.js"></script>
    <style>
        .form-control {
            height: auto;
        }
        .resp-message {
            height: 16rem;
            overflow: auto;
        }
        .img-preview img {
            margin-top: 2rem;
            vertical-align: middle;
            height: 14rem;
        }
        .form-group input[type=file] {
            opacity: 0.8;
            position: inherit;
        }
    </style>
</head>
<body>
<div class="container" ng-controller="picUploadCtrl">
    <div class="jumbotron">
        <div class="jumbotron-body">
            <h1>上传照片</h1>
            <p>请上传要对比的照片，获取2张图片的相似度，并判断是否为同一人</p>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">上传照片</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline" enctype="multipart/form-data" ng-init="formData = {repos:[]}; img = {}" ng-submit="submit(formData)">
                <div class="form-group">
                    <label for="pic1">照片1（小于1M）</label>
                    <input type="file" class="form-control" id="pic1" name="file" file-model="formData.pic1" error-message="errorMessage">
                </div>

                <div class="form-group">
                    <label for="pic2">照片2（小于1M）</label>
                    <input type="file" class="form-control" id="pic2" name="file" file-model="formData.pic2" error-message="errorMessage">
                </div>

                <button type="submit" class="btn btn-primary">对比</button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">应答信息</h3>
        </div>
        <div class="panel-body row">
            <div class="resp-message col-md-6">
                <span class="error-message text-danger" ng-show="errorMessage">{{errorMessage}}</span>
                <ul id="response-message">
                    <li ng-repeat="(key, value) in result">
                        {{key}} : {{value}}
                    </li>
                </ul>
            </div>
            <div class="img-preview col-md-6" ng-show="img.pic1">
                <img ng-src="{{img.pic1}}"/>
                <img ng-src="{{img.pic2}}"/>
            </div>
        </div>
    </div>

    <form class="form-inline">
        <div class="form-group">
            <label>关键字
                <input type="text" class="form-control" ng-model="logKeyword" ng-change="queryLog()">
            </label>
        </div>
    </form>
    <table class="table table-hover">
        <thead>
        <tr>
            <td>流水号</td>
            <td>日期</td>
            <td>时间</td>
            <td>返回码</td>
            <td>应答信息</td>
            <td>相似度</td>
            <td>节点名称</td>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="log in logs | orderBy:'seqNo':true" ng-class="{success:log.smlrVal >= 80}">
                <td>{{log.seqNo}}</td>
                <td>{{log.tranDate | localDate | date:'yyyy-MM-dd'}}</td>
                <td>{{log.tranTime | localTime | date:'HH:mm:ss'}}</td>
                <td>{{log.returnCode}}</td>
                <td>{{log.returnMsg}}</td>
                <td>{{log.smlrVal}}</td>
                <td>{{log.nodeName}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>